<script setup>
import { defineProps, defineEmits,watch,onMounted } from 'vue'
import {editorAsset} from "@/api/AssetApi.js"

// 定义 Props 接收父组件传递的数据
const props = defineProps({
  tableType: String,
  visible: Boolean,
  tableData: Array,
  tableColumns:Array,
  formData: Object,
  formDataValues:Array,
  title:String
})
onMounted(() => {
  console.log(props.formDataValues,props.formData,8888)
})
// 定义 Emit 方法通知父组件关闭 Drawer
const emit = defineEmits(['update:visible', 'close'])

// 监听 visible 变化并同步更新
watch(
  () => props.visible,
  (newVal) => {
    if (!newVal) {
      emit('close')
    }
  }
)

// 关闭 Drawer 的方法
const handleClose = () => {
  emit('update:visible', false)
}

// 处理状态改变的方法
const handleChangeStatus = async (row) => {
  console.log(row)
  const result = await editorAsset({id: row.assetsId, status: row.status})
  if (result.code === 200) {
    ElMessage.success("操作成功")
  }
}
</script>

<template>
  <el-drawer
    :modelValue="visible"
    @update:modelValue="val => $emit('update:visible', val)"
    :title="title"
    size="50%"
    direction="rtl"
    @close="handleClose"
  >
    <!-- 上半部分：动态表单 -->
    <el-descriptions label-width="120" :column="3" border>
      <el-descriptions-item v-for="(item, index) in formDataValues" :key="index">
        <template #label>{{ item.label }}</template>
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- 下半部分：表格 -->
    <el-table :data="tableData" border>
      <!-- 固定列 -->
<!--      <el-table-column prop="id" label="编号" width="80" align="center" />-->
<!--      <el-table-column prop="name" label="名称" align="center" />-->

      <!-- 动态列 -->
      <el-table-column
          v-for="(column, index) in tableColumns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          align="center"
      />
      <el-table-column label="操作" v-if="tableType==='fix'" width="150">
        <template #default="scope">
          <el-select v-model="scope.row.status" placeholder="请选择" v-if="scope.row.status==3"
                     @change="handleChangeStatus(scope.row)">
            <el-option label="维修结果" :value="3"></el-option>
            <el-option label="修好" :value="0"></el-option>
            <el-option label="报废" :value="4"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<style scoped lang="less">
.form-container {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;

  .el-form-item {
    margin-bottom: 16px;
  }

  // 行间分隔线样式
  .separator {
    height: 1px;
    background-color: #ebeef5;
    margin: 16px 0;
  }
}
</style>